<template>
  

<div class="container">
      <div class="form-box">
        <el-form ref="form"
                 :model="trainingDto.training"
                 label-width="80px">
          <el-row>
            <el-col :span="12">
              <div class="grid-content bg-purple">
                <el-form-item class="uploadCover"
                              size="mini"
                              style="">
                  <UploadImg @imageUrlChange="imageUrlChange"></UploadImg>
                </el-form-item>
     <el-form-item label="培训名称" style="width: 400px">
                                    <el-input v-model="trainingDto.training.trainingname" width="50px" auto-complete="off"></el-input>
                                </el-form-item>
                                <el-form-item label="创建人" style="width: 400px">
                                    <el-input v-model="trainingDto.training.establish"></el-input>
                                </el-form-item>
<el-form-item>
                                <el-dropdown @command="getText">
                                    <span class="el-dropdown-link">类型 <i class="el-icon-arrow-down el-icon--right"></i> </span>
                                    <el-dropdown-menu slot="dropdown">
                                        <el-dropdown-item v-for="item in dropdownData" :key="item.id" :command="item">
                                            {{ item.categoryname }}
                                        </el-dropdown-item>
                                    </el-dropdown-menu>
                                </el-dropdown>
                                <el-input placeholder="类型" class="handle-input mr10" style="width: 100px" v-model="category_name"></el-input>
</el-form-item>
                                <el-form-item label="简介" style="width: 400px">
                                    <el-input v-model="trainingDto.training.introduction"></el-input>
                                </el-form-item>
                                <el-form-item label="预算" style="width: 400px">
                                    <el-input v-model="trainingDto.training.budget"></el-input>
                                </el-form-item>
                                <el-form-item label="证书" style="width: 400px">
                                    <el-input v-model="trainingDto.training.credentials"></el-input>
                                </el-form-item>

 <el-form-item label="状态">
                                    <el-radio-group v-model="trainingDto.training.status">
                                        <el-radio label="0"></el-radio>
                                        <el-radio label="1"></el-radio>
                                        <el-radio label="2"></el-radio>
                                        <el-radio label="3"></el-radio>
                                    </el-radio-group>
                                </el-form-item>
                                <el-form-item label="评分" style="width: 400px">
                                    <el-input v-model="trainingDto.training.score"></el-input>
                                </el-form-item>
                                <el-form-item label="创建时间">
                                    <el-col :span="11">
                                        <el-date-picker
                                            type="date"
                                            placeholder="选择日期"
                                            v-model="trainingDto.training.establishtime"
                                            value-format="yyyy-MM-dd"
                                            style="width: 100%"
                                        ></el-date-picker>
                                    </el-col>
                                </el-form-item></div
                        ></el-col>
            <el-col :span="12">
              <div class="grid-content bg-purple-light">
                <!---->
                <el-table :data="courseTable"
                          border
                          class="table"
                          ref="multipleTable"
                          header-cell-class-name="table-header"
                          :row-key="getRowKeys"
                          @selection-change="handleSelectionChange">
                  <el-table-column type="selection"
                                   :selectable="selectable"
                                   width="55"
                                   align="center"
                                   :reserve-selection="true"></el-table-column>
                  <el-table-column prop="coursename"
                                   label="课程名"></el-table-column>
                  <el-table-column prop="establisher"
                                   label="创建人"></el-table-column>
                  <el-table-column label="封面"
                                   align="center">
                    <template slot-scope="scope">
                      <el-image class="table-td-thumb"
                                :src="scope.row.cover"
                                :preview-src-list="[scope.row.thumb]"></el-image>
                    </template>
                  </el-table-column>
                  <el-table-column prop="category"
                                   label="类别"></el-table-column>
                  <el-table-column prop="coursetime"
                                   label="课时">
                    <template slot-scope="scope">
                      {{scope.row.coursetime}}小时
                    </template>
                  </el-table-column>
                  <el-table-column prop="status"
                                   label="状态"></el-table-column>
                </el-table>

                <!--分页-->
                <div class="pagination">
                  <el-pagination background
                                 layout="total, prev, pager, next"
                                 :current-page="pageparm.currentPage"
                                 :page-size="pageparm.pageSize"
                                 :total="pageparm.total"
                                 @current-change="handlePageChange"></el-pagination>
                </div>

                <!---->
              </div>
            </el-col>
          </el-row><br />

          <el-form-item style="text-align: center">
            <el-button type="primary"
                       @click="onSubmit">表单提交</el-button>
            <el-button>取消</el-button>
          </el-form-item>
        </el-form>
      </div>
    </div>
  
</template>

<script>
import UploadImg from '../common/uploadImg.vue';
export default {
  inject:['refresh'],
    name: 'create_teaining',
    data() {
        return {
            dropdownData: [],
            category_name: '',
            form:{},
            //数据库课表
            courseTable: [],
            //分页
            query: {
                coursename: '',
                establisher: '',
                cover: '',
                category: '',
                coursetime: '',
                status: ''
            },
            trainingDto: {
                training: {
                    trainingname: '',
                    establishtime: '',
                    establish: '',
                    categoryid: '',
                    introduction: '',
                    score: '',
                    status: '',
                    budget: '',
                    credentials: ''
                },
                courseidList: []
            },
            //分页参数
            pageparm: {
                currentPage: 1,
                pageSize: 5,
                total: 10
            }
        };
    },
    created() {
        this.findCourse(this.pageparm);
    },

    components: {
        UploadImg
    },

    methods: {
getText(command) {
            console.log(command);
            this.category_name = command.categoryname;
            this.trainingDto.training.categoryid = command.id;
        },
        //课程无法被选取
        selectable: function (row, index) {
            if (row.status == '1') {                return true;
            }
        },

        // 多选操作 选取id
        handleSelectionChange(val) {
            this.multipleSelection = val;
            console.log(val);
            this.trainingDto.courseidList = [];
            for (let i = 0; i < val.length; i++) {
                this.trainingDto.courseidList.push(val[i].id);
                console.log(this.trainingDto.courseidList);
            }
        },

        //选取持久参数定义
        getRowKeys(row) {
            return row.coursename;
        },

        //提交表单
        onSubmit() {
            console.log(this.trainingDto);
 if (
            this.trainingDto.training.trainingname != null &
                this.trainingDto.training.establishtime != null&
                this.trainingDto.training.establish != null&
                this.trainingDto.training.categoryid != null&
                this.trainingDto.training.introduction != null&
                this.trainingDto.training.score != null&
                this.trainingDto.training.status != null&
                this.trainingDto.training.budget != null&
                this.trainingDto.training.credentials != null
            ) {
                
                this.$axios
                    .post('/api/trainings/addOne', this.trainingDto)
                    .then((res) => {
                        console.log(res);
                    })
                    .catch();
                this.$message.success('提交成功！');
                this.refresh();
            } else {
                this.$message.warning('输入不能为空！');
            }      
              },

        imageUrlChange(data) {
            this.trainingDto.training.cover = data;
        },
        //查询课表
        findCourse() {
            this.$axios
                .post('/api/course/find/' + this.pageparm.currentPage + '/' + this.pageparm.pageSize, this.query)
                .then((res) => {
                    this.courseTable = res.data.data.list;
                    this.pageparm.total = res.data.data.total;
                })
                .catch((err) => {
                    console.log(err);
                });
                this.$axios
                .post('/api/category/findCategory/',{})
                .then((res) => {
                    
                    this.dropdownData = res.data.data;
                })
                .catch((err) => {
                    console.log(err);
                });
        },
        // 分页导航
        handlePageChange(val) {
            this.$set(this.pageparm, 'currentPage', val);
            //console.log(val);
            this.findCourse();
        }
    }
};
</script>
